<template>
  <Modal title="主题授权"
         v-model="modelView"
         :mask-closable="false"
         :fullscreen="false"
         :width="720"
         :closable="false"
         @on-visible-change="changeVisible">
      <!-- 查询条件 -->
      <Row>
        <div style="position:relative; float:right;bottom:0px;">
          <Button type="primary" @click="handleQuery">刷新</Button>
        </div>
      </Row>
    <!-- 列表 -->
    <div class="view-table">
      <Table :data="tableData"
             :columns="tableColumns"
             size="small"
             highlight-row
             :loading="isLoading"
             ref="table">
        <template slot-scope="{ row, index }" slot="action">
          <Checkbox v-model="row.canSubscribe" :true-value="1" :false-value="0" @on-change="subscribePermit(row)">订阅
          </Checkbox>
          <Checkbox v-model="row.canPublish" :true-value="1" :false-value="0" @on-change="publishPermit(row)">发布
          </Checkbox>
        </template>
      </Table>
    </div>
    <!-- 分页 -->
    <div class="view-page">
      <Page :total="page.total"
            :current="page.currentPage"
            :page-size="page.pageSize"
            :page-size-opts="[5,10,50,100]"
            size="small"
            show-total
            show-elevator
            show-sizer
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"/>
    </div>
    <div slot="footer">
      <Button type="text" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import {topicPermit, getUserTopicAuthPage} from '@/api/mqtt/user'

  export default {
    name: "topicPermit",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      initFormData: {
        userName: null
      }
    },
    data() {
      return {
        modelView: false,
        userName: null,
        tableData: [],
        tableColumns: [
          {
            title: '主题名',
            key: 'topicName',
            align: 'center'
          },
          {
            title: '授权',
            slot: 'action',
            width: 200,
            align: 'center',
            fixed: 'right'
          }
        ],
        isLoading: false,
        page: {
          total: 0,
          currentPage: 1,
          pageSize: 5
        }
      }
    },
    watch: {
      visible(newVal) {
        this.modelView = newVal
      }
    },
    methods: {
      changeVisible() {
        if (this.modelView) {
          this.userName = this.initFormData.userName
          this.query()
        } else {
          this.userName = null
        }
        this.$emit('update:visible', this.modelView)
      },
      pageChange(currentPage) {
        this.page.currentPage = currentPage
        this.query()
      },
      pageSizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.query()
      },
      handleQuery() {
        this.page = {
          total: 0,
          currentPage: 1,
          pageSize: 5
        }
        this.query()
      },
      cancel() {
        this.modelView = false
      },
      query() {
        const self = this
        let params = {
          currentPage: self.page.currentPage,
          pageSize: self.page.pageSize,
          userName: this.userName
        }
        self.isLoading = true
        getUserTopicAuthPage(params)
          .then(response => {
            let result = response.data
            self.tableData = result.data
            self.page.total = result.total
            self.isLoading = false
          })
          .catch((err) => {
            self.isLoading = false
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })

      },
      subscribePermit(row) {
        const self = this
        self.$Modal.confirm({
          "title": "提醒",
          "content": "是否修改主题订阅权限?",
          "onOk": () => {
            let params = {
              topicName: row.topicName,
              userName: self.userName,
              canSubscribe: row.canSubscribe,
              canPublish: row.canPublish
            }
            topicPermit(params)
              .then(response => {
                self.$Message.success({
                  content: '修改主题订阅权限成功'
                })
              })
              .catch((err) => {
                self.$Message.error({
                  content: err,
                  duration: 10,
                  closable: true
                })
              })
          },
          "onCancel": () => {
            row.canSubscribe = (row.canSubscribe + 1) & 0x01
          }
        })
      },
      publishPermit(row) {
        const self = this
        self.$Modal.confirm({
          "title": "提醒",
          "content": "是否修改主题发布权限?",
          "onOk": () => {
            let params = {
              topicName: row.topicName,
              userName: self.userName,
              canSubscribe: row.canSubscribe,
              canPublish: row.canPublish
            }
            topicPermit(params)
              .then(response => {
                self.$Message.success({
                  content: '修改主题发布权限成功'
                })
              })
              .catch((err) => {
                self.$Message.error({
                  content: err,
                  duration: 10,
                  closable: true
                })
              })
          },
          "onCancel": () => {
            row.canPublish = (row.canPublish + 1) & 0x01
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
